<template>
	<view class="content">
		<view class="goods">
			<view class="title"> 商品信息 </view>
			<view class="goods-detail">
				<view class="img">
					<image v-if="detail.productSpecifications.slice(0,2)=='罩衣'" src="/static/gongzhuang/6.png" mode="">
					</image>
					<image v-else src="/static/gongzhuang/list-item.png" mode=""></image>
				</view>
				<view class="text">
					<view v-if="detail.productSpecifications.slice(0,2)=='罩衣'"> 找零工罩衣 </view>
					<view v-else> 找零工春夏季短T </view>
					<view class="">
						<text v-if="detail.productSpecifications.slice(0,2)=='罩衣'">罩衣</text>
						<text v-else>短袖两件</text>
						<text style="margin-left: 20rpx;">{{detail.tradeName}}</text>
					</view>
					<view> ￥{{detail.commodityPrice*detail.purchaseQuantity}} </view>
					<view> {{detail.actualShipmentsNumber}}件 </view>
				</view>
			</view>
		</view>
		<view v-if="isDelivery" class="delivery">
			<view class="title"> 物流信息 </view>
			<view class="line">
			</view>
			<view class="delivery-detail">
				<view>
					<view class="text-name"> 快递公司 </view>
					<view> {{detail.expressCompany}} </view>
				</view>
				<view>
					<view class="text-name"> 快递单号 </view>
					<view class="text-code">
						<span> {{detail.trackingNumber}} </span>
						<span @click="copy()" class="icon">
							<image src="/static/gongzhuang/order-code.png" mode=""></image>
						</span>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="none">
			<view class="title"> 物流信息 </view>
			<view class="line">
			</view>
			<view class="img-none">
				<image src="/static/gongzhuang/none-delivery.png" mode=""></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isDelivery: false,
				detail: {},
			};
		},
		onShow() {},
		onLoad(options) {
			this.getOrder(options.id)
		},
		methods: {
			async getOrder(id) {
				let res = await this.$fetch(`${this.$api.ordering_information}?id=${id}`, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				console.log('订单信息', res)
				this.detail = res.data
				this.detail.commodityPrice = this.detail.commodityPrice.toFixed(2)
				console.log('detail', this.detail)
				if (this.detail.trackingNumber) {
					this.isDelivery = true
				}
			},
			// 快递单号复制到剪贴板
			copy() {
				uni.setClipboardData({
					data: this.detail.trackingNumber,
					success: function() {
						uni.showToast({
							title: '快递单号已复制',
							icon: 'none'
						})
					},
					fail: function(e) {
						console.log(e)
					}
				});
			}
		}
	}
</script>
<style lang="less">
	.content {
		overflow: hidden;
		color: #262626;

		.goods {
			width: 100%;
			height: 334rpx;
			padding: 30rpx;
			background: #fff;
			box-sizing: border-box;
			margin-top: 20rpx;

			// color: #262626;	
			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.goods-detail {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.img {
					width: 182rpx;
					height: 196rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					width: 482rpx;
					font-weight: bold;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					view:nth-child(1) {
						font-size: 32rpx;
					}

					view:nth-child(2) {
						font-size: 28rpx;
					}

					view:nth-child(3) {
						font-size: 28rpx;
					}

					view:nth-child(4) {
						font-weight: normal;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
		}

		.delivery {
			width: 100%;
			height: 284rpx;
			background: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.line {
				width: 100%;
				height: 2rpx;
				background: #E4E4E4;
			}

			.delivery-detail {
				font-size: 32rpx;

				view {
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						margin-bottom: 20rpx;

						.icon {
							width: 38rpx;
							height: 38rpx;
							margin-left: 20rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.text-name {
						font-weight: bold;
					}

					.text-code {
						text-align: center;
					}
				}
			}
		}

		.none {
			width: 100%;
			height: 492rpx;
			background: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.line {
				width: 100%;
				height: 2rpx;
				background: #E4E4E4;
			}

			.img-none {
				width: 360rpx;
				height: 300rpx;
				align-self: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>